$(document).ready(function () {

    $('.s').bind("input propertychange",function(event){
        var value=$(this).val();
       if(value!=''){
           $(this).parent().next().next().children().attr('disabled',false);
       }
       else{
           $(this).parent().next().next().children().val('');
           $(this).parent().next().next().children().attr('disabled',true);
       }
    });

    function disableRegisterButton(on) {
        $("#register-form").data('formValidation').disableSubmitButtons(on);
    }

    $('#register-form').formValidation({
        message:'This value is not valid',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            asite_s1: {
                message: 'The asite_s1 is not valid!',
                validators: {
                    notEmpty: {
                        message: gettext('required!')
                    }
                }
            },
            bsite_s1: {
                validators: {
                    notEmpty: {
                        message: gettext('required!')
                    }
                }
            },
            asite_n1: {
                validators: {
                    notEmpty: {
                        message: gettext('required!')
                    },
                    digits: {
                        message: gettext('integer required!')
                    },
                    greaterThan: {
                        value:1,
                        message: gettext('greater than 0!')
                    }
                }
            },
            asite_n2: {
                validators: {
                    digits: {
                        message: gettext('integer required!')
                    },
                    greaterThan: {
                        value:1,
                        message: gettext('greater than 0!')
                    }
                }
            },
            asite_n3: {
                validators: {
                    digits: {
                        message: gettext('integer required!')
                    },
                    greaterThan: {
                        value:1,
                        message: gettext('greater than 0!')
                    }
                }
            },
            bsite_n1: {
                validators: {
                    notEmpty: {
                        message: gettext('required!')
                    },
                    digits: {
                        message: gettext('integer required!')
                    },
                    greaterThan: {
                        value:1,
                        message: gettext('greater than 0!')
                    }
                }
            },
            bsite_n2: {
                validators: {
                    digits: {
                        message: gettext('integer required!')
                    },
                    greaterThan: {
                        value:1,
                        message: gettext('greater than 0!')
                    }
                }
            },
            bsite_n3: {
                validators: {
                    digits: {
                        message: gettext('integer required!')
                    },
                    greaterThan: {
                        value:1,
                        message: gettext('greater than 0!')
                    }
                }
            },
            xsite_n: {
                validators: {
                    notEmpty: {
                        message: gettext('required!')
                    },
                    digits: {
                        message: gettext('integer required!')
                    },
                    greaterThan: {
                        value:1,
                        message: gettext('greater than 0!')
                    }
                }
            }
        }
    })
    .on('success.field.fv',function(e,data){
        // alert(data.fv.getInvalidFields().length);
        if (data.fv.getInvalidFields().length > 0) {
            disableRegisterButton(true);
        }
        else{
            disableRegisterButton(false);
        }
    })
    .on('success.form.fv',function(e){
        e.preventDefault();
        var data={
            asite_s1:$("#asite_s1").val(),
            asite_n1:$("#asite_n1").val(),
            asite_s2:$("#asite_s2").val(),
            asite_n2:$("#asite_n2").val(),
            asite_s3:$("#asite_s3").val(),
            asite_n3:$("#asite_n3").val(),
            bsite_s1:$("#bsite_s1").val(),
            bsite_n1:$("#bsite_n1").val(),
            bsite_s2:$("#bsite_s2").val(),
            bsite_n2:$("#bsite_n2").val(),
            bsite_s3:$("#bsite_s3").val(),
            bsite_n3:$("#bsite_n3").val(),
            xsite_n:$("#xsite_n").val()
        };
        $('body').preloader({
            text: gettext('Computing...')
        });
        $.requestJSON({
            url:Urls.resolve('material_api_v1:perovskite'),
            data:data,
            onSuccess:function(json){
                // alert("SUCCESS!");
                $('body').preloader('remove');
                // $.showModal({
                //     message: 'SUCCESS!'
                // });
                var scroll_offset=$("#cite").offset();
                $('html,body').animate({scrollTop:scroll_offset.top},1000);
                // var jump=function(){
                //     window.location=Urls.resolve('accounts:login');
                //     disableRegisterButton(false);
                // };
                // jump();
                // $.ajax({
                //   type: 'POST',
                //   url: '/matcloud/api/account/user/api-signup?_=' + (new Date()).valueOf(),
                //   data: {
                //     'email': $("#email").val(),
                //     'name': $("#username").val(),
                //     'pwd': $("#password").val()
                //   },
                //   success: function(res) {
                //     if(res.error) {
                //       console.log(res)
                //     }
                //   },
                //   global: false
                // }).always(function() {
                //   jump();
                // });
                var formula=data.asite_s1+'<sub>'+data.asite_n1+'</sub>'
                    +data.asite_s2+'<sub>'+data.asite_n2+'</sub>'
                    +data.asite_s3+'<sub>'+data.asite_n3+'</sub>'
                    +data.bsite_s1+'<sub>'+data.bsite_n1+'</sub>'
                    +data.bsite_s2+'<sub>'+data.bsite_n2+'</sub>'
                    +data.bsite_s3+'<sub>'+data.bsite_n3+'</sub>'
                    +'O'+'<sub>'+data.xsite_n+'</sub>';
                $("#result").empty();
                $('#formula').html(formula);
                var obj_title=
                    '<div class="col-md-12 card-text-col">' +
                    '<p class="prediction-type-text">'+
                    formula+ '</p></div>';
                $("#result").append(obj_title);
                var obj_content=
                    '<div class="col-md-6 card-text-col">'+
                    '<h3 class="section-title">E<sub>hull</sub> (meV/atom)</h3>'+
                    '<p class="prediction-text">'+json.data.reg_Ehull+'</p> </div>'+
                    '<div class="col-md-6 card-text-col">'+
                    '<h3 class="section-title">E<sub>f</sub> (eV/atom)</h3>'+
                    '<p class="prediction-text">'+json.data.reg_FE+'</p> </div>'+
                    '<div class="col-md-6 card-text-col">'+
                    '<h3 class="section-title">The prediction of stability</h3>'+
                    '<p class="prediction-text">'+json.data.clf_Ehull+'</p> </div>';
                $("#result").append(obj_content);
            },
            onError:function(json){
                console.error(json);
                disableRegisterButton(true);
            },
            onHide:function () {
                disableRegisterButton(false);
            }
        });

    })

});